<template>
    <div class="bg-purple-light">
        <ve-histogram
            :data="chartData"
            height="340px"
            :extend="chartExtend"
            :settings="chartSettings"
            :data-zoom="dataZoom"
            :toolbox="toolbox"
        ></ve-histogram>
    </div>
</template>

<script>
import VeLine from "v-charts/lib/line.common";
import veHistogram from "v-charts/lib/histogram.common";
import amap from "v-charts/lib/amap.common";
export default {
    props: {
        reviewByTime: Array
    },
    data: function() {
        this.toolbox = {
            feature: {
                saveAsImage: {}
            }
        };
        this.dataZoom = {
                type: "slider",
                show: this.reviewByTime.length > 16?true:false,
                startValue:this.reviewByTime.length - 15, //数据窗口范围的起始数值
                endValue: this.reviewByTime.length - 1,
                height: 10,
                bottom: 40,
                fillerColor: "rgba(247, 186, 42,1)", //选中范围的填充颜色。
                borderColor: "transparent", //边框颜色。
                backgroundColor: "#adb4c3",
                dataBackground: {
                    //数据阴影的样式。
                    lineStyle: {
                        color: {
                            type: "linear",
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "transparent" // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "transparent" // 100% 处的颜色
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    }, //阴影的线条样式
                    areaStyle: false //阴影的填充样式,
                }
            }
        this.chartSettings = {
            showLine: ["score"],
            axisSite: { right: ["score"] },
            yAxisName: ["数量", "总评分"],
            max: ["", 5],
            min: ["", 3],
            stack: { 用户: ["highReviewNumber", "lowReviewNumber"] },
            scale: true,
            labelMap: {
                highReviewNumber: "新增好评",
                lowReviewNumber: "新增差评",
                score: "评分",
                reviewDate: "日期"
            }
        };
        let that = this;
        return {
            chartExtend: {
                series: {
                    center: [-50, -50],
                    barMaxWidth: 30
                },
                legend: {
                    top: 20,
                    bottom: 20,
                    textStyle: {
                        color: "#000",
                        fontSize: 12
                    }
                },
                color: ["#41dbbd", "#409EFF", "#f86e86", "#d48265"],
                tooltip: {
                    trigger: "axis",
                    formatter: function(params, ticket, callback) {
                        var htmlStr = "";
                        for (var i = 0; i < params.length; i++) {
                            var param = params[i];
                            var xName = param.name; //x轴的名称
                            var seriesName = param.seriesName; //图例名称
                            var value = param.value; //y轴值
                            var color = param.color; //图例颜色
                            if (i === 0) {
                                htmlStr += xName + "<br/>"; //x轴的名称
                            }
                            htmlStr += "<div>";
                            htmlStr += htmlStrColor(color);
                            //圆点后面显示的文本
                            htmlStr += seriesName + ":" + value;
                            htmlStr += "</div>";
                        }
                        htmlStr +=
                            htmlStrColor(1) +
                            "总数" +
                            ":" +
                            that.chartData.rows[param.dataIndex].totalReview +
                            "<br/>";
                        htmlStr +=
                            htmlStrColor(2) +
                            "五星" +
                            ":" +
                            that.chartData.rows[param.dataIndex].five +
                            "<br/>";
                        htmlStr +=
                            htmlStrColor(3) +
                            "四星" +
                            ":" +
                            that.chartData.rows[param.dataIndex].four +
                            "<br/>";
                        htmlStr +=
                            htmlStrColor(4) +
                            "三星" +
                            ":" +
                            that.chartData.rows[param.dataIndex].three +
                            "<br/>";
                        htmlStr +=
                            htmlStrColor(5) +
                            "二星" +
                            ":" +
                            that.chartData.rows[param.dataIndex].two +
                            "<br/>";
                        htmlStr +=
                            htmlStrColor(6) +
                            "一星" +
                            ":" +
                            that.chartData.rows[param.dataIndex].one +
                            "<br/>";
                        return htmlStr;
                    }
                }
            },
            chartData: {
                columns: [
                    "reviewDate",
                    "score",
                    "highReviewNumber",
                    "lowReviewNumber"
                ],
                rows: []
            }
        };
    },
    watch: {
        reviewByTime: {
            handler(newName, oldName) {
                let data = this.reviewByTime;
                data.forEach((item, index) => {
                    item.reviewDate = item.reviewDate.slice(5, 10);
                    item.highReviewNumber = newName[index - 1]
                        ? item.highReview - newName[index - 1].highReview
                        : 0;
                    item.lowReviewNumber = newName[index - 1]
                        ? item.lowReview - newName[index - 1].lowReview
                        : 0;
                });
                this.chartData.rows = data;
            },
            immediate: true
        }
    },
    components: {
        veHistogram
    }
};
function htmlStrColor(key) {
    let color = "";
    switch (key) {
        case 1:
            color = "#f44336";
            break;
        case 2:
            color = "#e91e63";
            break;
        case 3:
            color = "#9c27b0";
            break;
        case 4:
            color = "#3f51b5";
            break;
        case 5:
            color = "#2196f3";
            break;
        case 6:
            color = "#cddc39";
            break;
        default:
            color = key;
            break;
    }
    return (
        '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
        color +
        ';"></span>'
    );
}
</script>
<style lang="stylus" scoped>
.bg-purple-light {
    background: #ffffff;
    height: 319px;
}
</style>
